<template>
	<view class="body">

		<view class="detail-swiper">
			<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
				<swiper-item v-for="(item,index) in goodsdetail.pics" :key="index">
					<image :src="item.pics_mid" @click="preview(index)"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="info-box">
			<view class="info-detail">
				<view class="info-price">
					￥{{goodsdetail.goods_price}}
				</view>
				<view class="info-name">
					<text>{{goodsdetail.goods_name}}</text>
					<view>
						<text class="iconfont .icon-shoucang1"></text>
						<text class="sc">收藏</text>
					</view>
				</view>
			</view>

			<view class="goods_introduce">
				<text>商品详情</text>
				<view class="rich">
					<rich-text :nodes="goodsdetail.goods_introduce"></rich-text>
				</view>
			</view>
		</view>

		<!-- <view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view> -->
		
		<view class="product-navigation">
					<view class="navigation-item">
						<view class="item">
							<text class="iconfont icon-kefu"></text>
							<text>客服</text>
							<button type="default" open-type="contact"></button>
						</view>
					</view>
					
					<view class="navigation-item">
						<view class="item">
							<text class="iconfont icon-fenxiang"></text>
							<text>分享</text>
							<button type="default" open-type="share"></button>
						</view>
					</view>
					
					<view class="navigation-item">
						<view class="item" @tap="gotoCart()">
							<text class="iconfont icon-gouwuche"></text>
							<text>购物车</text>
						</view>
					</view>
					
						<view class="navigation-item item-car" @tap="addCart()">
							加入购物车
						</view>
		
						<view class="navigation-item item-buy" @tap="buy">
							立即购买
						</view>
		</view>
		<view class="white">
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParam: {
					goods_id: 0
				},
				goodsdetail: [],
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 0,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		onLoad(e) {
			this.queryParam.goods_id = e.good_id
			this.getGoodsDetail()
		},
		methods: {
			async getGoodsDetail() {
				const res = await this.$Https({
					url: '/goods/detail',
					data: this.queryParam
				});
				console.log(res)
				this.goodsdetail = res.message
				console.log(this.goodsdetail)
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			},
			preview(index){
				uni.previewImage({
					current:index,
					urls:this.goodsdetail.pics.map(x => x.pics_big_url)
				})
			},
			gotoCart() {
				uni.switchTab({
					url:'/pages/cart/cart'
				})
			},
			addCart() {
				let cart = uni.getStorageSync('cart') || [];
				console.log(cart);
				let index = cart.findIndex(v => v.goods_id == this.goodsdetail.goods_id);
				if (index == -1) {
					this.goodsdetail.cartNum = 1;
					this.goodsdetail.checked = true;
					cart.push(this.goodsdetail);
				} else {
					cart[index].cartNum++;
				}
				
				uni.setStorageSync('cart', cart);
				uni.showToast({
					title:"加入成功"
				})
			},
			buy() {
				this.goodsdetail.cartNum = 1;
				this.goodsdetail.checked = true;
				uni.setStorageSync('buy', this.goodsdetail);
				uni.navigateTo({
					url:'../../subpkg2/pay/pay'
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.detail-swiper {

		swiper {
			width: 750rpx;
			height: 600rpx;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.info-box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: rgb(238, 238, 238);

		.info-detail {
			margin-top: 10px;
			padding: 5px;
			background-color: white;
			display: flex;
			flex-direction: column;
			
			.info-price {
				font-size: 25px;
				padding-left: 10px;
				color: rgb(235, 68, 80);
			}
			
			.info-name {
				flex: 1;
				display: flex;
			
				text {
					flex: 4;
					font-size: 14px;
					color: rgb(103, 103, 103);
				}
			
				view {
					flex: 1;
					display: flex;
					flex-direction: column;
					text-align: center;
					border-left: 2px solid black;
			
					text {
						font-size: 14px;
						
						.icon-shoucang1 {
							color: #D9557C;
						}
					}
				}
			}
		}
		.goods_introduce {
			margin-top: 10px;
			background-color: white;
			text {
				padding-left: 10px;
				color: rgb(235, 68, 80);
				font-size: 20px;
			}
			.rich {
				margin-top: 10px;
			}
		}
	}
	.goods_nav{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	
	
	
	
	.product-navigation{
			position: fixed;
			left:0;
			bottom: 0;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			display: flex;
			border-top: 1px solid #cacaca;
			.navigation-item{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				position: relative;
				button{
					position: absolute;
					width: 60%;
					height: 100%;
					margin: 0 20%;
					top: 0;
					left: 0;
					opacity: 0;
				}
				.item{
					display:flex;
					flex-direction:column;
					text-align: center;
				}
				}
			.item-car{
				flex: 2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #ffa50f;
				color: #fff;
				font-size: 25rpx;
				font-weight: 600;
				
	
				}
			.item-buy{
				flex: 2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #ff0000;
				color: #fff;
				font-size: 25rpx;
				font-weight: 600;
				}
		}
		.white{height: 100rpx;}
</style>